<template>
  <div class="shop-info" ref="info">
    <div class="info-content">
      <section class="section">
        <h3 class="section-title">配送信息</h3>
        <div class="delivery">
          <div>
            <span class="delivery-icon">{{info.description}}</span>
            <span>
              由商家配送提供配送，约{{info.deliveryTime}}分钟送达，距离
              {{info.distance}}
            </span>
          </div>
          <div class="delivery-money">配送费￥{{info.deliveryPrice}}</div>
        </div>
      </section>

      <Split />

      <section class="section">
        <h3 class="section-title">活动与服务</h3>
        <div class="activity">
          <div
            class="activity-item"
            v-for="(support, index) in info.supports"
            :key="index"
            :class="supportClasses[support.type]"
          >
            <span class="content-tag">
              <span class="mini-tag">{{support.name}}</span>
            </span>
            <span class="activity-content">{{support.content}}</span>
          </div>
        </div>
      </section>

      <Split />

      <section class="section">
        <h3 class="section-title">商家实景</h3>
        <div class="pic-wrapper" ref="pics">
          <ul class="pic-list" ref="ul">
            <li class="pic-item" v-for="(pic,index) in info.pics" :key='index'>
              <img width="120" height="90" :src="pic" />
            </li>
          </ul>
        </div>
      </section>
      <Split />
      <section class="section">
        <h3 class="section-title">商家信息</h3>
        <ul class="detail">
          <li>
            <span class="bold">品类</span>
            <span>{{info.category}}</span>
          </li>
          <li>
            <span class="bold">商家电话</span>
            <span>{{info.phone}}</span>
          </li>
          <li>
            <span class="bold">地址</span>
            <span>{{info.address}}</span>
          </li>
          <li>
            <span class="bold">营业时间</span>
            <span>{{info.workTime}}</span>
          </li>
        </ul>
      </section>
    </div>
  </div>
</template>


<script>
import BScroll from 'better-scroll' 
import {mapState} from 'vuex'
// import Star from '../../../components/Star/Star.vue'

export default {
    data(){
        return {
            favorite: localStorage.getItem('favorite') === 'true',
            supportClasses: ['activity-green', 'activity-red', 'activity-orange'],
        }
    },
    // 此时info 可能是一个空对象, 也可能是一个带数据的对象
    mounted() {
        this.$nextTick(() => {
            this.ratingsSroll = new BScroll(this.$refs.info, {click: true}) 
            this.picsScroll = new BScroll(this.$refs.pics, {click: true, scrollX: true})
            // 指定图片ul 的样式宽度(前提是有数据)
            this.info.pics && this.setUlWidth()
        })
    },
    watch:{
        info(){ // info 状态数据更新了, 但界面还没有真正更新
            this.$nextTick(()=>{
                this.ratingsSroll.refresh()
                this.setUlWidth()
                this.picsScroll.refresh()
            })
        }
    },
    computed:{
        ...mapState(['info'])
    },
    methods:{
        toggleFavorite(){
            this.favorite=!this.favorite
            // 保存状态
            localStorage.setItem('favorite',this.favorite)
        },
        setUlWidth(){
            const ul = this.$refs.ul 
            const liWidth = 120 
            const space = 6
            const size = this.info.pics.length
            ul.style.width = (liWidth + space) * size - space + 'px'

        }
    },
    components:{
        // Star
    }
};
</script>

<style lang="stylus">
@import "../../../common/stylus/mixins.styl"
    .shop-info 
        position: absolute 
        top: 195px 
        bottom: 0
        left: 0
        width: 100% 
        background: #fff; 
        overflow: hidden
        .section
            padding 16px 14px 14px 
            font-size 16px 
            background-color #fff 
            color #666
            border-bottom 1px solid #eee 
            position relative
            .section-title 
                color #000
                font-weight 700
                line-height 16px
                > .iconfont 
                    float right 
                    color #ccc
            .delivery
                margin-top 16px 
                font-size 13px 
                line-height 18px
                .delivery-icon 
                    width 55px 
                    font-size 11px
                    margin-right 10px 
                    display inline-block 
                    text-align center
                    color #fff
                    background-color #0097ff 
                    padding 1px 0
                    border-radius 4px
                .delivery-money 
                    margin-top 5px
            .activity
                margin-top 16px
                .activity-item 
                    margin-bottom 12px 
                    display flex
                    font-size 13px 
                    align-items center 
                    &.activity-green
                        .content-tag
                            background-color rgb(112, 188, 70)
                    &.activity-red
                        .content-tag
                            background-color rgb(240, 115, 115)
                    &.activity-orange
                        .content-tag
                            background-color: rgb(241, 136, 79)
                    .content-tag
                        display inline-block
                        border-radius 2px 
                        width 36px 
                        height: 18px 
                        margin-right 10px 
                        color #fff
                        font-style normal 
                        position relative
                        .mini-tag
                            position absolute 
                            left 0
                            top 0
                            right -100%
                            bottom -100%
                            font-size 24px 
                            transform scale(.5) 
                            transform-origin 0 0 
                            display flex
                            align-items center 
                            justify-content center
            .pic-wrapper 
                width: 100% 
                overflow: hidden
                white-space: nowrap 
                margin-top 16px
                .pic-list 
                    font-size: 0
                    .pic-item
                        display: inline-block 
                        margin-right: 6px 
                        width: 120px
                        height: 90px 
                        &:last-child 
                            margin: 0
            .detail
                margin-bottom -16px
                > li
                    display flex
                    justify-content space-between 
                    align-items center
                    margin-right -10px 
                    padding 16px 12px 16px 0
                    line-height 16px
                    om-border-1px(#ddd) 
                    font-size 13px
                    > .bold
                        font-weight 700
                        color #333 
                    &:last-child
                        border-none()

        .split
            width: 100%
            height: 16px
            border-top: 1px solid rgba(7, 17, 27, 0.1)
            border-bottom: 1px solid rgba(7, 17, 27, 0.1)
            background: #f3f5f7
</style>
